<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>Headroom.js</title>
		<meta name="viewport" content="width=device-width">
		<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="demo1.css">
	</head>

	<body>

		<header id="header" class="header header--fixed">
			Headroom.js
		</header>

		<!--测试增加页面，实际项目中可去除/start-->
		<div style="height:1000px;background: #FF0000;color:#FFFFFF;padding-top:46px;text-align: center;font-size: 60px;">红</div>
		<div style="height:1000px;background: #00FF00;color:#FFFFFF;text-align: center;font-size: 60px;">绿</div>
		<div style="height:1000px;background: #0000FF;color:#FFFFFF;text-align: center;font-size: 60px;">蓝</div>
		<!--测试增加页面，实际项目中可去除/end-->

		<script src="//cdn.bootcss.com/jquery/1.2.3/jquery.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/headroom.js"></script>
		<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>

		<script>
			$(function() {
				$("#header").headroom({
					classes: {
						initial: "animated",
						pinned: "slideDown",
						unpinned: "slideUp"
					}
				});
			})
		</script>

	</body>

</html>